<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>功能页 - 企业门户</title>
    <link rel="stylesheet" href="style.css" />
    <style>
        /* 子页面局部样式：卡片布局 */
        .features-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1.5rem;
        }
        .feature-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            padding: 1.2rem;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .feature-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(0,0,0,0.12);
        }
        .feature-card h3 { margin: .2rem 0 .6rem; }
        .feature-card p { color: #666; }
        .feature-actions { display: flex; gap: .5rem; margin-top: 1rem; }
        .feature-actions a,
        .feature-actions button {
            background-color: #007BFF;
            color: #fff;
            padding: .5rem .9rem;
            text-decoration: none;
            border-radius: 6px;
            font-size: .95rem;
            border: none;
            cursor: pointer;
        }
        .feature-actions a.secondary,
        .feature-actions button.secondary { background-color: #6c757d; }
        .feature-actions a:hover,
        .feature-actions button:hover { filter: brightness(0.9); }

        .admin-panel {
            margin-top: 2rem;
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1rem 1.2rem;
            border: 1px dashed #ced4da;
        }
        .admin-panel h4 { margin: 0 0 .8rem; }
        .admin-row { display: flex; flex-wrap: wrap; gap: .6rem; }
        .admin-row input[type="text"] {
            flex: 1 1 280px;
            padding: .6rem .7rem;
            border: 1px solid #ced4da;
            border-radius: 6px;
        }
        .admin-row button { padding: .6rem 1rem; }
        .note { color: #666; font-size: .9rem; margin-top: .6rem; }
    </style>
</head>
<body>
    <canvas id="particle-canvas"></canvas>

    <header>
        <nav>
            <a href="index.html" class="logo">企业门户</a>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="features.html">功能页</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="features-container">
            <h1>组内可用功能</h1>
            <p class="note">下面展示的是当前我们组内可用的功能模块。点击卡片按钮可以跳转到对应功能。管理员可在下方“管理员面板”中编辑各按钮绑定的链接。</p>
            <div class="features-grid" id="featuresGrid">
                <!-- 功能卡片由脚本渲染 -->
            </div>

            <div class="admin-panel">
                <h4>管理员面板：编辑功能链接</h4>
                <div class="admin-row">
                    <input type="text" id="featureName" placeholder="功能名称（例如：报表中心）" />
                    <input type="text" id="featureUrl" placeholder="链接地址（例如：https://example.com/report）" />
                    <button id="addFeature">添加/更新功能</button>
                    <button class="secondary" id="resetFeatures">重置为默认</button>
                </div>
                <p class="note">提示：功能配置保存在浏览器本地（localStorage），不会影响其他用户。你可以为每个功能设置一个跳转链接，点击功能卡片上的“访问”按钮即可跳转。</p>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 企业名称. 保留所有权利.</p>
    </footer>

    <script src="script.js"></script>
    <script>
        // 默认功能列表（可被管理员面板覆盖）
        const DEFAULT_FEATURES = [
            { name: '报表中心', url: 'https://example.com/report', desc: '查看统计报表与数据洞察' },
            { name: '项目协作', url: 'https://example.com/projects', desc: '管理项目与任务分配' },
            { name: '知识库', url: 'https://example.com/wiki', desc: '浏览组内文档与知识条目' },
            { name: '自动化工具', url: 'https://example.com/automation', desc: '常用自动化脚本与工具集' },
        ];

        const STORAGE_KEY = 'group_features_config_v1';

        function loadFeatures() {
            const saved = localStorage.getItem(STORAGE_KEY);
            if (saved) {
                try { return JSON.parse(saved); } catch(e) { return DEFAULT_FEATURES; }
            }
            return DEFAULT_FEATURES;
        }

        function saveFeatures(features) {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(features));
        }

        function renderFeatures() {
            const grid = document.getElementById('featuresGrid');
            const features = loadFeatures();
            grid.innerHTML = '';
            features.forEach((f, idx) => {
                const card = document.createElement('div');
                card.className = 'feature-card';
                card.innerHTML = `
                    <h3>${f.name}</h3>
                    <p>${f.desc || ''}</p>
                    <div class="feature-actions">
                        <a href="${f.url}" target="_blank" rel="noopener">访问</a>
                        <button class="secondary" data-idx="${idx}">编辑</button>
                    </div>
                `;
                grid.appendChild(card);
            });
        }

        function setupAdminPanel() {
            const nameInput = document.getElementById('featureName');
            const urlInput = document.getElementById('featureUrl');
            const addBtn = document.getElementById('addFeature');
            const resetBtn = document.getElementById('resetFeatures');

            // 添加或更新功能：若名称已存在则覆盖链接，否则追加新功能
            addBtn.addEventListener('click', () => {
                const name = nameInput.value.trim();
                const url = urlInput.value.trim();
                if (!name || !url) { alert('请填写功能名称和链接地址'); return; }
                const features = loadFeatures();
                const idx = features.findIndex(f => f.name === name);
                if (idx >= 0) {
                    features[idx].url = url;
                } else {
                    features.push({ name, url, desc: '' });
                }
                saveFeatures(features);
                renderFeatures();
                nameInput.value = '';
                urlInput.value = '';
            });

            // 卡片上的“编辑”按钮：把该卡片的配置回填到输入框
            document.getElementById('featuresGrid').addEventListener('click', (e) => {
                if (e.target.tagName === 'BUTTON' && e.target.dataset.idx) {
                    const idx = Number(e.target.dataset.idx);
                    const features = loadFeatures();
                    const f = features[idx];
                    document.getElementById('featureName').value = f.name;
                    document.getElementById('featureUrl').value = f.url;
                }
            });

            // 重置为默认配置
            resetBtn.addEventListener('click', () => {
                saveFeatures(DEFAULT_FEATURES);
                renderFeatures();
            });
        }

        renderFeatures();
        setupAdminPanel();
    </script>
</body>
</html>